<template>
    <el-dialog title="审核" v-model="open" width="800px" append-to-body @close="close">
        <el-row :gutter="20">
            <el-col :span="12" style="border-right:1px var(--el-border-color) var(--el-border-style)">
                <el-divider>审核记录</el-divider>
                <el-timeline style="max-width: 600px">
                    <el-timeline-item
                    v-for="(activity, index) in history"
                    :key="index"
                    :timestamp="activity.checkTime"
                    >
                    <dict-tag :options="flow_check_status" :value="activity.checkStatus"/> {{ activity.checkUserName }} : {{ activity.checkComment }}
                    </el-timeline-item>
                </el-timeline>
            </el-col>
            <el-col :span="12">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px"> 

          <div v-if="props.flowData">          
        <el-form-item label="工单类别" prop="type">
          <el-input v-model="props.flowData.typeName" readonly/>
        </el-form-item>
        <el-form-item label="资产分类" prop="cateId">
          <el-input v-model="props.flowData.cateName" readonly/>
        </el-form-item>
        <el-form-item label="申请数量" prop="amount">
          <el-input v-model="props.flowData.amount" readonly/>
        </el-form-item>
        <el-form-item label="资产编码" prop="assetNum">
          <el-input v-model="props.flowData.assetNum" readonly/>
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input v-model="props.flowData.price" readonly/>
        </el-form-item>
        <!--
        <el-form-item label="单号" prop="num">
          <el-input v-model="props.flowData.num" readonly/>
        </el-form-item>
        <el-form-item label="申请部门" prop="deptName">
          <el-input v-model="props.flowData.deptName" readonly/>
        </el-form-item>
        <el-form-item label="申请人" prop="userName">
          <el-input v-model="props.flowData.userName" readonly/>
        </el-form-item>
        <el-form-item label="申请时间" prop="applyTime">
          <el-input v-model="props.flowData.applyTime" readonly/>
        </el-form-item>
        -->
        <el-form-item label="申请原由" prop="reason">
          <el-input type="textarea" v-model="props.flowData.reason" readonly/>
        </el-form-item>
        <el-form-item label="申请说明">
          <el-input type="textarea" v-model="props.flowData.content" readonly/>
        </el-form-item>
          </div>
        <el-divider>审核意见</el-divider>
      
        <el-form-item label="审核结果" prop="checkStatus">
            <el-radio-group v-model="form.checkStatus">
            <el-radio
              v-for="dict in checkOptions"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核说明" prop="checkComment">
          <el-input v-model="form.checkComment" type="textarea" rows="3" placeholder="请输入您的意见"/>
        </el-form-item>
      </el-form>
            </el-col>
        </el-row>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submit">确 定</el-button>
          <el-button @click="close">取 消</el-button>
        </div>
      </template>
    </el-dialog>
</template>

<script setup name="CheckDialog">
import { checkFlow, listFlowCheck } from "@/api/asset/flowCheck";

const { proxy } = getCurrentInstance();
const { asset_flow_type, flow_check_status } = proxy.useDict('asset_flow_type', 'flow_check_status');
const emit = defineEmits();

const open = ref(false);

const checkOptions = ref([
    {
        value:"1",
        label:"审核通过"
    },{
        value:"2",
        label:"审核不通过"
    }
]);
const props = defineProps({
  flowData: {
    type: Object,
    default: null
  }
});
const history = ref([]);


const data = reactive({
  form: {},
  rules: {
    checkStatus: [
        { required: true, message: "审核结果不能为空", trigger: "blur" }
    ],
    nextAction: [
        { required: true, message: "下一步操作不能为空", trigger: "blur" }
    ]
  }
});

const { form, rules } = toRefs(data);

function reset(){
    form.value = {
        checkStatus: null,
        checkComment: null,
        nextAction: null,
        flowId: props.flowData ? props.flowData.id : null,
        id: props.flowData ? props.flowData.checkId : null,
    }
    if(props.flowData){        
        listFlowCheck({flowId: props.flowData.id, checkStatus:'3', pageSize:100}).then(response=>{
            history.value = response.rows;
        });
    }else{
        history.value = [];
    }
}

watch(() => props.flowData, val => {
  if (val) {
   open.value = true;
   form.value.flowId = props.flowData.id;
  } else {
    open.value = false;
   form.value.flowId = null;
  }
  reset();
},{ deep: true, immediate: true });

function submit(){
    proxy.$refs["formRef"].validate(valid => {
    if (valid) {
        checkFlow(form.value).then(response => {
          proxy.$modal.msgSuccess("审核成功");
          emit("submit");
        });
    }
  });
}

function close(){
  reset();
  emit("close");
}

reset();

</script>
